<template>
  <!-- 自动化生产数据表表单弹窗 -->
  <el-dialog
    v-model="visibleDialog"
    :title="props.title"
    width="40%"
    draggable
    @close="closeDialog"
  >
    <el-descriptions
      class="margin-top"
      title=""
      :column="2"
      size="large"
      v-show="props.isReadonly"
      border
    >
      <!--<el-descriptions-item>
        <template #label>
          <div class="cell-item">工序计划id</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{ formData.planId }}
        </div>
      </el-descriptions-item>-->
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">生产日期</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ formData.planActualDate?.split(" ")[0] || "" }}
        </div>
      </el-descriptions-item>
      <!-- <el-descriptions-item v-if="props.dataType == '1'">
        <template #label>
          <div class="cell-item">工单</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ formData.planCode }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">批次</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ formData.plannedBatch }}
        </div>
      </el-descriptions-item>-->
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">产品编码</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ formData.materialCode }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">产品名称</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ formData.materialName }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item
        v-if="
          props.dataType == '1' ||
          props.dataType == '5' ||
          props.dataType == '3' ||
          props.dataType == '4'
        "
      >
        <template #label>
          <div class="cell-item">炉号</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ formData.lnum }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item v-if="props.dataType == '1'">
        <template #label>
          <div class="cell-item">电量</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ formData.electricQuantity }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item v-if="props.dataType == '1'">
        <template #label>
          <div class="cell-item">司炉工</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ formData.fireman }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item v-if="props.dataType == '1'">
        <template #label>
          <div class="cell-item">出铁重量</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ formData.materialWeight }}
        </div>
      </el-descriptions-item>

      <!--<el-descriptions-item
        v-if="props.dataType == '1' || props.dataType == '5'"
      >
        <template #label>
          <div class="cell-item">区分</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ formData.dataDis == "1" ? "包" : "模" }}
        </div>
      </el-descriptions-item>-->
      <!--<el-descriptions-item>
        <template #label>
          <div class="cell-item">类型</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{ formData.dataType }}
        </div>
      </el-descriptions-item>-->
      <el-descriptions-item
        v-if="props.dataType == '5' || props.dataType == '1'"
        :span="props.dataType == '5' ? 1 : 2"
      >
        <template #label>
          <div class="cell-item">是否合格</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ formData.isValid == "1" ? "合格" : "不合格" }}
        </div>
      </el-descriptions-item>
      <!-- <el-descriptions-item
        v-if="props.dataType == '3' || props.dataType == '5'"
      >
        <template #label>
          <div class="cell-item">开始时间</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{ formData.beginTime }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item
        v-if="props.dataType == '1' || props.dataType == '4'"
        :span="2"
      >
        <template #label>
          <div class="cell-item">结束时间</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{ formData.endTime }}
        </div>
      </el-descriptions-item> -->
      <el-descriptions-item
        v-if="
          props.dataType == '1' ||
          props.dataType == '3' ||
          props.dataType == '5' ||
          props.dataType == '4'
        "
      >
        <template #label>
          <div class="cell-item">
            {{
              props.dataType == "1"
                ? "熔炼开始时间"
                : props.dataType == "5"
                ? "浇筑开始时间"
                : props.dataType == "3"
                ? "造型时间"
                : props.dataType == "4"
                ? "每包开始时间"
                : ""
            }}
          </div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ formData.beginTime }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item
        v-if="
          props.dataType == '1' ||
          props.dataType == '5' ||
          props.dataType == '4'
        "
      >
        <template #label>
          <div class="cell-item">
            {{
              props.dataType == "1"
                ? "熔炼结束时间"
                : props.dataType == "5"
                ? "浇筑结束时间"
                : props.dataType == "4"
                ? "每包结束时间"
                : ""
            }}
          </div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ formData.endTime }}
        </div>
      </el-descriptions-item>
      <!-- 精炼时间 -->
      <el-descriptions-item v-if="props.dataType == '1'">
        <template #label>
          <div class="cell-item">
            {{ props.dataType == "1" ? "精炼开始时间" : "开始时间" }}
          </div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ formData.refineBeginTime }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item v-if="props.dataType == '1'" :span="2">
        <template #label>
          <div class="cell-item">
            {{ props.dataType == "1" ? "精炼结束时间" : "结束时间" }}
          </div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ formData.refineEndTime }}
        </div>
      </el-descriptions-item>
      <!-- <el-descriptions-item :span="2">
        <template #label>
          <div class="cell-item">备注</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{ formData.remarks }}
        </div>
      </el-descriptions-item> -->
    </el-descriptions>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="160"
      v-show="!props.isReadonly"
    >
      <el-row>
        <!--<el-col :span="12">
          <el-form-item label="工序计划id" prop="planId" label-width="80px">
            <el-input
              v-model="formData.planId"
              placeholder="请输入工序计划id"
              clearable
            />
          </el-form-item>
        </el-col>-->
        <el-col :span="12">
          <el-form-item
            label="生产日期"
            prop="planActualDate"
            label-width="80px"
          >
            <el-date-picker
              v-model="formData.planActualDate"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="请选择生产日期"
              style="width: 100%"
              @change="planActualDateChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工单" prop="planId" label-width="80px">
            <el-select
              v-model="formData.planId"
              placeholder="请选择工单"
              filterable
              clearable
              style="width: 100%"
              @change="planChange"
            >
              <el-option
                v-for="item in planList"
                :key="item.id"
                :label="`${item.materialName}-${item.plannedBatch}`"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品" prop="materialName" label-width="80px">
            <el-input
              v-model="formData.materialName"
              placeholder="请输入产品"
              clearable
              disabled
              @click="showWorkOrderSelect"
            >
              <!--<template #append>
                <el-button @click="resetMaterial"> 清除 </el-button>
              </template>-->
            </el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="12"
          v-if="
            props.dataType == '1' ||
            props.dataType == '5' ||
            props.dataType == '3' ||
            props.dataType == '4'
          "
        >
          <el-form-item label="炉号" prop="lnum" label-width="80px">
            <el-input
              v-model="formData.lnum"
              placeholder="请输入炉号"
              clearable
            />
          </el-form-item>
        </el-col>
        <!-- 电量 -->
        <el-col :span="12" v-if="props.dataType == '1'">
          <el-form-item label="电量" prop="electricQuantity" label-width="80px">
            <el-input
              v-model="formData.electricQuantity"
              placeholder="请输入电量"
              clearable
            />
          </el-form-item>
        </el-col>
        <!-- 司炉工 -->
        <el-col :span="12" v-if="props.dataType == '1'">
          <el-form-item label="司炉工" prop="fireman" label-width="80px">
            <!--<el-input
              v-model="formData.fireman"
              placeholder="请输入司炉工"
              clearable
            />-->
            <el-select
              v-model="formData.fireman"
              placeholder="请选择司炉工"
              filterable
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="item in crewMemberList"
                :key="item.id"
                :label="item.memberName"
                :value="item.memberName"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!--        <el-col :span="12">
          <el-form-item label="开始时间" prop="beginTime" label-width="80px">
            <el-input
              v-model="formData.beginTime"
              placeholder="请输入开始时间"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间" prop="endTime" label-width="80px">
            <el-input
              v-model="formData.endTime"
              placeholder="请输入结束时间"
              clearable
            />
          </el-form-item>
        </el-col>-->
        <el-col :span="12" v-if="props.dataType == '1'">
          <el-form-item label="出铁重量" prop="materialWeight" label-width="80px">
            <el-input
              v-model="formData.materialWeight"
              placeholder="请输入出铁重量"
              clearable
            />
          </el-form-item>
        </el-col>
        <!-- <el-col
          :span="12"
          v-if="props.dataType == '3' || props.dataType == '5'"
        >
          <el-form-item
            prop="beginTime"
            :rules="rules.beginTime"
            label-width="80"
            label="开始时间"
          >
            <el-date-picker
              v-model="formData.beginTime"
              type="datetime"
              placeholder="请选择计划开始时间"
              style="width: 100%"
              :disabled="props.isReadonly"
            />
          </el-form-item>
        </el-col> -->
        <!--<el-col :span="12">
          <el-form-item label="备注" prop="remarks" label-width="80px">
            <el-input
              v-model="formData.remarks"
              placeholder="请输入备注"
              clearable
            />
          </el-form-item>
        </el-col>-->
        <el-col
          :span="12"
          v-if="props.dataType == '5'"
        >
          <el-form-item label="区分" prop="dataDis" label-width="80px">
            <el-radio-group v-model="formData.dataDis" v-if="!props.isReadonly">
              <el-radio :label="'1'">包</el-radio>
              <el-radio :label="'2'">模</el-radio>
              <el-radio :label="'3'">炉</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col
          :span="12"
          v-if="props.dataType == '1' || props.dataType == '5'"
        >
          <el-form-item label="是否合格" prop="isValid" label-width="80px">
            <el-radio-group v-model="formData.isValid" v-if="!props.isReadonly">
              <el-radio :label="'1'">合格</el-radio>
              <el-radio :label="'0'">不合格</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col
          :span="24"
          v-if="
            props.dataType == '1' ||
            props.dataType == '5' ||
            props.dataType == '4'
          "
        >
          <el-form-item
            :label="
              props.dataType == '1'
                ? '熔炼时间'
                : props.dataType == '5'
                ? '浇筑时间'
                : props.dataType == '4'
                ? '每包时间'
                : ''
            "
            prop="beginTime"
            label-width="80px"
          >
            <el-date-picker
              v-model="formData.beginTimeSearch"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
              @change="getbeginTimeLocal"
            />
          </el-form-item>
        </el-col>
        <!-- 造型时间 -->
        <el-col :span="12" v-if="props.dataType == '3'">
          <el-form-item
            label="造型时间"
            prop="beginTimeSearch"
            label-width="80px"
          >
            <el-date-picker
              v-model="formData.beginTime"
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width: 100%"
              clearable
            />
          </el-form-item>
        </el-col>
        <!-- 精炼时间 -->
        <el-col :span="24" v-if="props.dataType == '1'">
          <el-form-item
            label="精炼时间"
            prop="refineTimeSearch"
            label-width="80px"
          >
            <el-date-picker
              v-model="formData.refineTimeSearch"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
              @change="getRefineBeginTimeLocal"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button
          v-if="!props.isReadonly"
          type="primary"
          :loading="loading"
          @click="handleSubmit"
          >确 定</el-button
        >
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
    <conten-select
      :visible="selectDialogSELECT.visible"
      @change-visible="changeVisibleSELECT"
      :brekList="brekList"
    />
  </el-dialog>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "MESMESPRODUCINTAUTODATAADDORUPDATE",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  dataType: {
    type: String,
    default: () => {
      return "";
    },
  },
});

const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
    if (newVal && props.dataType == "1") {
      getCrewMemberList();
    }
    setTimeout(() => {
      formRef.value.clearValidate();
    }, 50);
  }
);
const rules = reactive({
  planId: [
    { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" },
  ],
  lnum: [
    { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" },
  ],
  // materialId: [{ required: true, message: "请选择产品", trigger: "change" }],
  materialCode: [
    { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" },
  ],
  materialName: [
    { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" },
  ],
  beginTime: [
    { required: true, message: "请选择开始与结束时间", trigger: "change" },
  ],
  refineTimeSearch: [
    { required: true, message: "请选择开始与结束时间", trigger: "change" },
  ],
  endTime: [],
  dataDis: [{ required: true, message: "请选择包/模", trigger: "change" }],
  dataType: [
    { min: 1, max: 1, message: "长度在 1 到 1 个字符", trigger: "blur" },
  ],
  isValid: [{ required: true, message: "请选择是否合格", trigger: "change" }],
  materialWeight: [
    { pattern: /^\d{1,18}(\.\d{0,6})?$/, message: "请输入数字" },
  ],
  remarks: [
    { min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur" },
  ],
  planId: [
    {
      required: true,
      message: "请选择工单",
      trigger: "change",
    },
  ],
});

const formRef = ref(ElForm);

let formData = reactive({
  id: "",
  planId: "",
  lnum: "",
  materialId: "",
  materialCode: "",
  materialName: "",
  beginTime: "",
  endTime: "",
  dataDis: "",
  dataType: props.dataType,
  isValid: "",
  materialWeight: "",
  remarks: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdatedUserName: "",
  lastUpdatedUserId: "",
  lastUpdateTime: "",
  deleted: "",
  beginTimeSearch: [],
  refineTimeSearch: [],
  planActualDate: "",
  // 电量
  electricQuantity: "",
  // 司炉工
  fireman: "",
  // 精炼时间
  refineEndTime: "",
  refineBeginTime: "",
  plannedBatch: "",
});

watch(
  () => props.data,
  (newVal: any) => {
    formData.id = "";
    if (newVal?.id) {
      const {
        id,
        planId,
        lnum,
        materialId,
        materialCode,
        materialName,
        beginTime,
        endTime,
        dataDis,
        dataType,
        isValid,
        materialWeight,
        remarks,
        createTime,
        createdUserId,
        createdUserName,
        lastUpdatedUserName,
        lastUpdatedUserId,
        lastUpdateTime,
        deleted,
        planActualDate,
        // 电量
        electricQuantity,
        // 司炉工
        fireman,
        // 精炼时间
        refineEndTime,
        refineBeginTime,
        plannedBatch,
      } = newVal;
      Object.assign(formData, {
        id,
        planId,
        lnum,
        materialId,
        materialCode,
        materialName,
        beginTime,
        endTime,
        dataDis,
        dataType,
        isValid,
        materialWeight,
        remarks,
        createTime,
        createdUserId,
        createdUserName,
        lastUpdatedUserName,
        lastUpdatedUserId,
        lastUpdateTime,
        deleted,
        planActualDate,
        // 电量
        electricQuantity,
        // 司炉工
        fireman,
        // 精炼时间
        refineEndTime,
        refineBeginTime,
        plannedBatch,
      });
      formData.beginTimeSearch = [beginTime, endTime];
      formData.refineTimeSearch = [refineBeginTime, refineEndTime];
      getPlanList();
    }
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.id = "";
  formData.planId = "";
  formData.lnum = "";
  formData.materialId = "";
  formData.materialCode = "";
  formData.materialName = "";
  formData.beginTime = "";
  formData.endTime = "";
  formData.dataDis = "";
  formData.dataType = props.dataType;
  formData.isValid = "";
  formData.materialWeight = "";
  formData.remarks = "";
  formData.createTime = "";
  formData.createdUserId = "";
  formData.createdUserName = "";
  formData.lastUpdatedUserName = "";
  formData.lastUpdatedUserId = "";
  formData.lastUpdateTime = "";
  formData.deleted = "";
  formData.beginTimeSearch = [];
  formData.refineTimeSearch = [];
  formData.planActualDate = "";
  // 电量
  formData.electricQuantity = "";
  // 司炉工
  formData.fireman = "";
  // 精炼时间
  formData.refineEndTime = "";
  formData.refineBeginTime = "";
  formData.plannedBatch = "";
  planList.value = [];
}

const loading = ref(false);

/** 自动化生产数据表保存提交 */
function handleSubmit() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      loading.value = true;
      const text = formData.id ? "编辑" : "新增";
      await request({
        url: "/mes/mesproducintautodata/save",
        method: "post",
        data: formData,
      }).finally(() => {
        loading.value = false;
      });
      ElMessage.success(text + `成功`);
      closeDialog();
      emit("reset-table", formData.id);
    }
  });
}

// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});
const showWorkOrderSelect = () => {
  selectDialogSELECT.value.visible = true;
};
//选择物料弹窗
const selectDialogSELECT = ref({
  visible: false,
});
const changeVisibleSELECT = (val: boolean, data: any) => {
  selectDialogSELECT.value.visible = val;
  if (data) {
    formData.materialId = data.id;
    formData.materialCode = data.materialCode;
    formData.materialName = data.materialName;
  }
};
// 回显的数据
const brekList = ref([]);
const resetMaterial = () => {
  formData.materialId = "";
  formData.materialCode = "";
  formData.materialName = "";
};
function getbeginTimeLocal(data: any) {
  if (data) {
    formData.beginTime = data[0];
    formData.endTime = data[1];
  } else {
    formData.beginTime = "";
    formData.endTime = "";
  }
}
function getRefineBeginTimeLocal(data: any) {
  if (data) {
    formData.refineBeginTime = data[0];
    formData.refineEndTime = data[1];
  } else {
    formData.refineBeginTime = "";
    formData.refineEndTime = "";
  }
}
const planList = ref([]);
async function getPlanList() {
  let processesClassification = 0;
  if (props.dataType === "1") {
    processesClassification = 3;
  } else if (props.dataType === "3") {
    processesClassification = 4;
  } else if (props.dataType === "4") {
    processesClassification = 3;
  } else if (props.dataType === "5") {
    processesClassification = 5;
  }
  await request({
    url: "/mes/mesplanworkingform/getList",
    method: "post",
    data: {
      processesClassification,
      planActualDate: formData.planActualDate,
    },
  }).then((res) => {
    planList.value = res.data;
  });
}
function planChange() {
  let plan = planList.value.find((item) => item.id == formData.planId);
  console.log(plan);
  formData.lnum = plan.stoveNum;
  formData.materialId = plan.materialId;
  formData.materialCode = plan.materialCode;
  formData.materialName = plan.materialName;
}
function planActualDateChange() {
  planList.value = [];
  formData.lnum = "";
  formData.planId = "";
  formData.materialId = "";
  formData.materialCode = "";
  formData.materialName = "";
  getPlanList();
}
const crewMemberList = ref([]);
async function getCrewMemberList() {
  await request({
    url: "/mes/mescrew/getCrewMembersByCrewCode",
    method: "post",
    data: {
      crewCode: "司炉工",
    },
  }).then((res) => {
    crewMemberList.value = res.data;
  });
}
</script>
